<template>
	<view class="focus">
		<!-- <view>/ -->
		<view>
			<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;">
				<view class="u-m-t-20 repair-box u-p-30 u-p-l-40 u-p-r-40">
					<view style="display: flex;">
						<view style="margin-left: 20rpx;" class="left-right">
							<view class="named" style="display: flex;">
								<view style="display: flex;">
									<view style="position: relative;width: 40px;height: 40px;">
										<image @click="navTo('/pages/clap/homepageClap',userObj)"
											v-if="userObj.user_front_head_portrait && userObj.user_front_head_portrait !='***'"
											class="avatar-icon" :src="userObj.user_front_head_portrait">
										</image>
										<image v-else @click="navTo('/pages/clap/homepageClap',userObj)"
											class="avatar-icon" src="../../static/image/default-title.jpg">
										</image>
										<image @click="navTo('/pages/clap/homepageClap',userObj)"
											class="avatar-icon avatar-right-icon"
											:src="userObj.publisher_role==1||userObj.publisher_role==2?'/static/image/owner2.png':userObj.publisher_role==4?'/static/image/1.png':'/static/image/tenant.png'">
										</image>

									</view>
									<view class="avatar-title">
										<view class="">
											<text class="avatar-name">
												{{userObj.publisher_name=='***'?'匿名用户':userObj.user_nickname!=null?userObj.user_nickname.substring(0,6)+'...':'Vip'+ userObj.user_id}}
											</text>
											<text class="avatar-house-name"> 【{{userObj.proName}}】 </text>
										</view>
										<view class="title">{{userObj.begin_time.substring(0,16) }}</view>
									</view>
								</view>
							</view>
							<!-- 如果是匿名用户 -->
							<view class="left-right-left">
								<view class="operation_box">
									<view class="matter public-three" v-if="userObj.type_classification == 1">
										<image class="imagesMinx" src="../../static/image/report.png" mode=""></image>报事
									</view>
									<view class="matter1 public-three" v-if="userObj.type_classification == 2">
										<image class="imagesMinx" src="../../static/image/eport.png" mode=""></image>报修
									</view>
									<view class="matter2 public-three" v-if="!userObj.type_classification == 3">
										<image class="imagesMinx" src="../../static/image/mood.png" mode=""></image>心情
									</view>
								</view>
							</view>
						</view>
					</view>

					<view style="margin-top: 10px;margin-left: 10px;">
						<view>{{userObj.photo_remarks}}</view>
					</view>
					<view style="display: flex;padding: 10px;" v-if="userObj.firstPhoto != ''">
						<view :style="indexs==0?'width: 103px;height: 103px;'
										 :indexs == 1?'width: 103px;height: 103px;margin-left: 10px;'
										 :'width: 103px;height: 103px;margin-left: 10px;'" v-for="(items,indexs) in userObj.firstPhoto.split(',')">
							<image style="width: 100%;height: 100%;border-radius: 14rpx;"
								@click="preview(items,indexs,userObj.firstPhoto.split(','))" :src="items"
								mode="aspectFill"></image>
						</view>
					</view>
					<view style="margin-left: 10px;font-size: 15px;color: #999;"
						v-if="userObj.type_classification != 3">
						<image class="hand-photo-postion" @click="check(userObj)" src="../../static/image/address1.png"
							mode=""></image>
						<text style="color: #000;">{{userObj.building_location}} </text>
					</view>

					<view class="complete">
						<view v-if="userObj.type_classification != 3">
							<!-- 新状态：1/客服待接单。2、客服待派单。3、维接待接单。4、待维修。5、维修中。6 维修结束 -->
							<view class="u-flex" v-if="userObj.problem_status == 1">
								<image class="image_handle" src="../../static/image/kf_pending_orders.png" mode=""
									mode=""></image>
								<view class="maintenance_status">客服待接单</view>
							</view>
							<view class="u-flex" v-if="userObj.problem_status == 2">
								<image class="image_handle" src="../../static/image/waiting_list.png" mode="" mode="">
								</image>
								<view class="maintenance_status">客服待派单</view>
							</view>
							<view class="u-flex" v-if="userObj.problem_status == 3">
								<image class="image_handle" src="../../static/image/wx_pending_orders.png" mode=""
									mode=""></image>
								<view class="maintenance_status">处理人待接单</view>
							</view>
							<view class="u-flex" v-if="userObj.problem_status == 4">
								<image class="image_handle" src="../../static/image/repaired.png" mode="" mode="">
								</image>
								<view class="maintenance_status">待处理</view>
							</view>
							<view class="u-flex" v-if="userObj.problem_status == 5">
								<image class="image_handle" src="../../static/image/maintenance.png" mode="" mode="">
								</image>
								<view class="maintenance_status">处理中</view>
							</view>
							<view class="u-flex" v-if="userObj.problem_status == 6">
								<image class="image_handle" src="../../static/image/completed.png" mode="" mode="">
								</image>
								<view class="maintenance_status">已完成</view>
							</view>
						</view>
					</view>

					<view style="margin-top: -30px;width: 40%;float: right;margin-right: 10px;">

						<view style="display: flex;justify-content: space-between;flex-direction:row-reverse;">
							<view class="" style="display: flex;justify-content: space-between;">
								<view style="display: flex;">
									<image style="width: 25px;height: 25px;" src="../../static/image/comment.png"
										mode="">
									</image>
									<view class="like_reply">{{userObj.comment_count}}</view>
								</view>
								<!-- 点赞 -->
								<view style="display: flex;margin-left: 20rpx;" @click="dianZanClick">
									<image v-if="userObj.sfClick == false" style="width: 25px;height: 25px;"
										src="../../static/image/givethe.png" mode=""></image>
									<image v-if="userObj.sfClick == true" style="width: 25px;height: 25px;"
										src="../../static/image/giewa.png" mode=""></image>
									<view class="like_reply">{{userObj.click_fabulous_count}}</view>
								</view>
							</view>



							<view @click="deteleClaplist(userObj)" v-if="userObj.user_id==userId">
								<image style="width: 19px;height: 18px;margin-top: 2px;"
									src="../../static/image/delete (2).png" mode=""></image>
							</view>
							<view class="complaint_box">
								<!-- 投诉 -->
								<!-- <view style="display: flex;align-items: center;" @click="complaint()">
									<image style="width: 25px;height: 25px;" src="../../static/image/givethe.png"
										mode="">
									</image>
								</view> -->


								<!-- 投诉 -->
								<view class="complaint" v-if="complaintStyle">
									<view class="complaint_item" v-for="(item,i) in complaintList" :key="i">
										{{item.name}}
									</view>
								</view>

								<!-- 投诉 -->
							</view>


						</view>
					</view>
					<view v-if="userObj.problem_status >= 4" style="margin-top: 15px;">

						<view style="margin-top: 10px;" v-if="userObj.recordCdo.take_orders_name != null">
							<text style="color: #999;">处理人：</text>
							{{userObj.recordCdo.employee_org_dept_name}}-{{userObj.recordCdo.employee_org_post_name}}-{{userObj.recordCdo.take_orders_name}}
						</view>

						<view style="color: #999;margin-top: 10px;" v-if="userObj.problem_status == 6">
							处理时间：
							<text style="color: #000;" v-if="userObj.recordCdo.start_time!=null">
								{{userObj.recordCdo.start_time.substr(0,16)}}
								<text v-if="userObj.recordCdo.complete_time!=null">
									至{{
										userObj.recordCdo.start_time.substr(0,10) == userObj.recordCdo.complete_time.substr(0,10)?userObj.recordCdo.complete_time.substr(11,5):
										userObj.recordCdo.start_time.substr(0,4)  == userObj.recordCdo.complete_time.substr(0,4) ?userObj.recordCdo.complete_time.substr(5,11):
										userObj.recordCdo.complete_time.substr(0,16)
									}}
								</text>
							</text>
						</view>

						<view v-if="userObj.problem_status == 6 "
							style="color: #000000;margin-top: 10px;margin-left: 10px;">
							{{userObj.recordCdo.complete_content}}
						</view>

						<view v-if="userObj.recordCdo.complete_image != null">
							<view style="display: flex;margin-top: 10px;"
								v-if="userObj.recordCdo.complete_image != null">
								<view style="width: 103px;height: 103px;margin-left: 10px;"
									v-for="(item2,index2) in userObj.recordCdo.complete_image.split(',')">
									<image style="width: 100%;height: 100%;border-radius: 14rpx;"
										@click="imageBig(item2)" :src="item2" mode=""></image>
								</view>
							</view>
						</view>

					</view>
					<view v-for="(item,index) in commentData" style="margin-top: 10px;">
						<!-- <view style="background-color: rgb(247, 248, 249);padding-bottom: 9px" @longpress="deleteImage" :data-index="index"> -->
						<view style="background-color: rgb(247, 248, 249);padding-bottom: 9px">
							<view style="border: 1px solid #F7F8F9;">
								<view class=" repair-box u-p-30 u-p-l-30 u-p-r-30"
									style="background-color: rgb(247, 248, 249);">
									<view style="display: flex;">
										<view style="width: 40px;height: 40px;border-radius: 50%;">
											<image v-if="item.headImg" :src="item.headImg"
												style="width: 100%;height: 100%;border-radius: 50%;"></image>
											<image style="width: 100%;height: 100%;border-radius: 50%;" v-else
												src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg">
											</image>
										</view>
										<view style="margin-left: 20px;">
											<view style="font-size: 15px;color: #666;font-weight: 600;">
												{{item.userName}}
											</view><br>
											<view style="font-size: 13px;color: #999999;margin-top: -14px;">
												{{item.begin_time}}
											</view>
											<view>{{item.comment_content}}</view>
										</view>

									</view>
									<view style="float: right;">
										<view style="display: flex;">
											<view style="margin-top: 3px;margin-right: 13px;font-size: 10px;"
												v-if="homelist.ownerUserId == item.user_id">
												<view style="color: red;" @click="deleteBtn(item)">删除</view>
											</view>
											<view style="margin-top: 3px;margin-right: 13px;font-size: 10px;">
												<view style="color: #0088009c;" @click="fllowClick(item)">回复</view>
											</view>
											<view style="display: flex;" @click="listBtn(item)">
												<image style="width: 21px;height: 23px;"
													:src="item.sfClick==false?'../../static/image/givethe.png':'../../static/image/giewa.png'"
													mode="">
												</image>
												<view class="like_reply">{{item.click_fabulous_count}}
												</view>
											</view>
										</view>

									</view>
								</view>
							</view>
							<view v-if="item.replyTotal > 0" style="width: 85%;margin-left: 46px;">
								<!-- 多条数据 -->
								<view v-for="(item2,index2) in item.commentDataseeFllow" v-if="item.indexList">
									<view style="margin-top: 10px;display: flex;padding-bottom: 15px;">
										<view style="width: 40px;height: 40px;border-radius: 50%;">
											<image v-if="item2.headImg" :src="item2.headImg"
												style="width: 100%;height: 100%;border-radius: 50%;"></image>
											<image style="width: 100%;height: 100%;border-radius: 50%;" v-else
												src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg">
											</image>
										</view>
										<view style="margin-left: 14px;">
											<text style="color: #11A9EC;">{{item2.userName}}</text><br>
											<text style="font-size: 10px;">{{item2.begin_time}}</text>
											<br>
											<view style="font-size: 15px;margin-top: 5px;" @click="fllowClick(item2)">
												{{item2.comment_content}}
											</view>
										</view>

									</view>
									<view style="float: right;margin-top: -47px;margin-right: 20px;">
										<view style="display: flex;">
											<view style="margin-top: 3px;margin-right: 13px;font-size: 10px;"
												v-if="homelist.ownerUserId == item.user_id">
												<view style="color: red;" @click="deleteBtn1(item2)">删除</view>
											</view>
											<view style="display: flex;" @click="dianZanClick1(item2)">

												<image style="width: 21px;height: 23px;"
													:src="item2.sfClick==false?'../../static/image/givethe.png':'../../static/image/giewa.png'"
													mode="">
												</image>
												<view class="like_reply">{{item2.click_fabulous_count}}</view>
											</view>
										</view>

									</view>
									<!-- 子级评论 -->
									<view v-for="(item3,index3) in item2.childList">
										<view style="margin-left: 43px;">
											<view style="display: flex;">
												<view style="width: 35px;height: 35px;border-radius: 50%;">
													<image v-if="item3.headImg" :src="item3.headImg"
														style="width: 100%;height: 100%;border-radius: 50%;"></image>
													<image style="width: 100%;height: 100%;border-radius: 50%;" v-else
														src="https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg">
													</image>
												</view>
												<view style="margin-left: 5px;">
													<text
														style="color: #11A9EC;font-size: 13px;">{{item3.userName}}</text>
													<text style="font-size: 13px;">回复</text>
													<text
														style="color: #11A9EC;font-size: 13px;">{{item3.by_userName}}</text>
													<view style="font-size: 10px;margin-top: 3px;">
														{{item3.begin_time}}
													</view>
													<view style="margin-top: 6px;">
														{{item3.comment_content}}
													</view>
												</view>
											</view>
										</view>
										<view style="float: right;margin-top: -24px;margin-right: 20px;">
											<view style="display: flex;" @click="dianZanClick2(item3)">

												<image style="width: 21px;height: 23px;"
													:src="item3.sfClick==false?'../../static/image/givethe.png':'../../static/image/giewa.png'"
													mode="">
												</image>
												<view class="like_reply">{{item3.click_fabulous_count}}</view>
											</view>
										</view>
									</view>
								</view>

								<view style="color: #11A9EC;margin-top: 10px;text-align: center;"
									@click="seefllowClick(item)">
									<!-- {{!item.isEndPage?'':item.isEndPage==false?'查看更多':'收起'}} -->

									<span v-if="item.isEndPage==true ||item.isEndPage==false">
										{{item.isEndPage==false?'查看更多':'收起'}}
									</span>
									<span v-else>
										点击查看{{item.replyTotal}}条评论
									</span>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 评论 -->
		<view class="send-input" style="position: fixed;
			bottom: 0;width: 100%;height: 130rpx;
			background-color: #fff;display: flex;
			align-items: baseline;padding-top: 10px;
			padding-bottom: 100rpx;">
			<view style="width: 72%;margin-left: 4%;">
				<u-input style='text-indent: 30rpx;background: #f6f6f6;
				border-radius: 22px;' height="86" :clearable="clearable" v-model="text" />
			</view>
			<view class="search-btn">
				<u-button @click='sendOut' shape='circle'>发送</u-button>
			</view>
		</view>

		<!-- 回复 -->
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<input type="text" value="" v-model="text" placeholder="请输入回复内容...." />
				<button type="default" @click="sendOutone()">发送</button>
			</view>
		</uni-popup>
		<!-- 弹窗 -->
		<view class="modal" v-if="deletepop">
			<view class="modal-cont">
				<view class="modal-title">提示</view>
				<view style="display: flex;margin-top: 20px;">
					<view><span>是否删除词条数据</span></view>
				</view>

				<view class="modal-bottom">
					<view class="btn-cancel" @click="deletepop = false">取消</view>
					<view class="btn-sure" @click="getDelete()">确定删除</view>
				</view>
			</view>
		</view>

		<!-- 地图定位 -->
		<view class="modal2" v-if="consultMap">
			<view class="modal-cont2">
				<view class="modal-title2" style="margin-top: 18px;">
					地图定位
				</view>
				<map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude"
					:markers="mapCenter"></map>
				<view class="modal-bottom2">
					<view class="btn-cancel2" @click="consultMap = false">关闭</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				// 投诉

				complaintList: [{
						name: '涉黄'
					},
					{
						name: '涉政'
					},
					{
						name: '侮辱谩骂'
					},
					{
						name: '侵权'
					},
					{
						name: '其它'
					}
				],
				complaintStyle: false,
				// 投诉

				childList: [],
				setFocus: false, //回复
				fllowFlag: false,
				indexList: true,
				confirmDeal: [],
				// tableData:{}
				// con:"+关注",
				flag: false, //单位切换开关 
				clapListData: [],
				pageIndex: 1,
				//评论参数
				comment_content: null, //评论内容
				userObj: {},
				text: null,
				messageInfo: {
					begin_time: null,
					comment_content: null,
					passivity_user_id: null,
				},
				commentData: [],
				reply: false,
				id: null,
				commentDataseeFllow: [], //查看更多评论
				type: 1,
				deletepop: false,
				clearable: '',
				deleteData: {},

				consultMap: false,
				mapCenter: [{
					id: 1,
					width: 100,
					height: 100,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/index/tbdw.png'
				}],
				latitude: 39.909,
				longitude: 116.39742,
				userId: uni.getStorageSync('rawData').userId
			};
		},
		onLoad(options) {
			const item = JSON.parse(decodeURIComponent(options.item));
			this.userObj = item
			this.image = item.firstPhoto
			console.log(this.image)
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.getCommentList()
		},
		methods: {
			// 投诉
			// complaint() {
			// 	console.log(222)
			// 	this.complaintStyle = !this.complaintStyle
			// },
			//查看地图定位按钮
			check(val) {
				this.mapCenter[0].latitude = val.latitude;
				this.mapCenter[0].longitude = val.longitude;
				this.longitude = val.longitude, // 回显位置的纬度
					this.latitude = val.latitude, // 回显位置的经度
					this.consultMap = true;
			},
			//删除随手拍
			deteleClaplist(val) {
				this.deletepop = true
				this.deleteData = val
				console.log(this.deleteData)
			},
			getDelete() {
				if (this.homelist.ownerUserId != this.deleteData.user_id) {
					uni.showToast({
						title: '删除失败，您不可以删除其他人的数据！',
						icon: 'error'
					});
					this.deletepop = false
					return
				}
				this.$request.api.deleteClapList({
					id: this.deleteData.id
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						this.deletepop = false
						uni.switchTab({ //跳转页面
							url: "/pages/clap/indexclap"
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						});
					}
				})
			},
			//父级删除评论
			deleteBtn(val) {
				console.log(val)
				this.userObj.comment_count = this.userObj.comment_count - 1
				if (this.userObj.user_id == this.homelist.ownerUserId) {
					this.$request.api.deleteCommentList({
						id: val.id
					}).then(res => {
						console.log(res)
						this.getCommentList();
					})
				}


			},
			//子级删除评论
			deleteBtn1(val) {
				if (this.homelist.ownerUserId == val.passivity_user_id) {
					this.$request.api.deleteCommentList({
						id: val.id
					}).then(res => {
						console.log(res)
						this.getCommentList();
					})
				}
			},

			dianZanClick1(item2) {
				//随手拍点赞
				if (item2.sfClick == true) { //

					item2.sfClick = false;
					item2.click_fabulous_count = item2.click_fabulous_count - 1
				} else {
					item2.sfClick = true
					item2.click_fabulous_count = item2.click_fabulous_count + 1
				}
				this.$request.api.givethumbs({
					user_id: this.homelist.ownerUserId,
					type: 2, //点赞状态:1、随手拍，2、评论
					id: item2.id, //随手拍
				}).then(res => {

				})
			},
			//子级回复点赞
			dianZanClick2(item3) {
				//随手拍点赞
				if (item3.sfClick == true) { //

					item3.sfClick = false;
					item3.click_fabulous_count = item3.click_fabulous_count - 1
				} else {
					item3.sfClick = true
					item3.click_fabulous_count = item3.click_fabulous_count + 1
				}
				this.$request.api.givethumbs({
					user_id: this.homelist.ownerUserId,
					type: 2, //点赞状态:1、随手拍，2、评论
					id: item3.id, //随手拍
				}).then(res => {

				})
			},
			//取消关注
			fllowBtnone() {

				if (this.userObj.concernFlag == true) {
					this.userObj.concernFlag = false;
				} else {
					this.userObj.concernFlag = true
				}
				this.$request.api.followList({
					focus_on_people_id: this.homelist.ownerUserId, //关注人id
					people_concerned_id: this.userObj.user_id, //被关注人id
				}).then(res => {

				})
			},
			//点击更多评论
			seefllowClick(val) {
				if (!val.pageIndex) {
					this.$set(val, 'commentDataseeFllow', []);
					this.$set(val, 'isEndPage', false);
					this.$set(val, 'pageIndex', 1);
				} else {
					//判断是否为最后一页
					console.log("是否为最后页", val.isEndPage)
					if (val.isEndPage) {
						//弹框
						this.$set(val, 'commentDataseeFllow', null);
						this.$set(val, 'isEndPage', null);
						this.$set(val, 'pageIndex', null);

						return;
					} else {
						val.pageIndex = val.pageIndex + 1;
					}
				}
				this.$request.api.moreCommentList({
					id: val.id,
					pageIndex: val.pageIndex,
					selectUserId: this.homelist.ownerUserId
				}).then(res => {
					this.childList = res.data.data.datalist
					val.isEndPage = res.data.data.isEndPage;

					console.log(this.childList)

					for (let key in this.childList) {
						console.log("push参数", key)
						val.commentDataseeFllow.push(this.childList[key])

					}
				})


				this.$set(val, 'indexList', true);

			},
			//



			// //回复
			fllowClick(val) {
				this.$refs.popup.open('buttom')
				this.setFocus = true
				this.comment_id = val.id
				console.log(this.comment_id)
			},
			//回复发送
			sendOutone() {
				this.userObj.comment_count = this.userObj.comment_count + 1
				console.log(this.userObj.comment_count)
				this.$request.api.commentData({
					id: this.userObj.id, //随手拍id
					user_id: this.homelist.ownerUserId, //操作人id
					by_user_id: this.userObj.user_id, //被评论人id
					text: this.text, //回复内容
					comment_id: this.comment_id
				}).then(res => {

					this.getCommentList();
					this.text = ""
					this.setFocus = false
				})
			},
			//关注
			fllowBtn(item) {
				this.$request.api.followList({
					focus_on_people_id: this.homelist.ownerUserId, //关注人id
					people_concerned_id: userObj.user_id, //被关注人id
				}).then(res => {

				})

			},
			dianZanClick() {
				//随手拍点赞
				if (this.userObj.sfClick == true) {
					this.userObj.sfClick = false;
					this.userObj.click_fabulous_count = this.userObj.click_fabulous_count - 1
				} else {
					this.userObj.sfClick = true
					this.userObj.click_fabulous_count = this.userObj.click_fabulous_count + 1
				}
				this.$request.api.givethumbs({
					user_id: this.homelist.ownerUserId,
					type: 1, //点赞状态:1、随手拍，2、评论
					id: this.userObj.id, //随手拍
				}).then(res => {

				})
			},
			//评论
			sendOut() {
				this.userObj.comment_count = this.userObj.comment_count + 1
				this.$request.api.commentData({
					// answer_id:,//被评论id
					id: this.userObj.id, //随手拍id
					user_id: this.homelist.ownerUserId, //操作人id
					by_user_id: this.userObj.user_id, //被评论人id
					text: this.text, //评论内容
				}).then(res => {
					this.getCommentList();
					this.text = ""

					// this.commentData = res.data.data.datalist
				})

			},
			//获取评论数据
			getCommentList() {
				this.$request.api.commentList({
					id: this.userObj.id,
					pageIndex: this.pageIndex,
					selectUserId: this.homelist.ownerUserId
				}).then(res => {
					this.commentData = res.data.data.datalist
				})
			},
			//评论点赞
			listBtn(item) {
				if (item.sfClick == true) {
					item.sfClick = false;
					item.click_fabulous_count = item.click_fabulous_count - 1
				} else {
					item.sfClick = true
					item.click_fabulous_count = item.click_fabulous_count + 1
				}
				this.$request.api.givethumbs({
					user_id: this.homelist.ownerUserId,
					type: 2, //点赞状态:1、随手拍，2、评论
					id: item.id, //随手拍或评论id
				}).then(res => {
					// this.getclapList()
				})

			},
			preview(item, indexs, imgarrs) {
				var imgarr = []
				for (let i = 0; i < imgarrs.length; i++) {
					imgarr.push(imgarrs[i])
				}

				uni.previewImage({
					urls: imgarr,
					current: indexs,
					// longPressActions: {
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			// // 图片预览
			// preview(item) {
			// 	uni.previewImage({
			// 		urls: [item],
			// 		current: 0,
			// 		longPressActions: {
			// 			success: function(data) {
			// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			// 			},
			// 			fail: function(err) {
			// 				console.log(err.errMsg);
			// 			}
			// 		}
			// 	});
			// },
			navTo(url, item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});

			},

			shouList() {
				this.indexList = !this.indexList
			},

		}
	}
</script>

<style lang="scss">
	.img_sex {
		width: 20px;
		height: 20px;
		position: absolute;
		// top: 85px;
		left: 51px;
		z-index: 10;
	}

	.pop {
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.pop button {
		font-size: 24rpx;
		height: 60rpx;
		margin-left: 10rpx;
		width: 120rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		color: #ffffff;
	}

	.pop input {
		width: 600rpx;
		height: 60rpx;
		border: 1rpx solid #999999;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.focus {
		.focusLogo {
			width: 100%;
			height: 500rpx;
			padding-top: 118px;
			// background-color: #F9A832;
			top: 0;
			// z-index: -1;
			background-image: url('../../static/image/background.png');
			position: relative;

			.focusLog_img {
				position: absolute;
				top: 150rpx;
				left: 33rpx;
				width: 25rpx;
				height: 25rpx;
				color: #fff;
			}

			.LogoBox {
				display: flex;
				padding: 0 20rpx;

				.timeImg {
					width: 120rpx;
					height: 120rpx;

					.timeImg_img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.timeTxt {
					width: 60%;
					margin-left: 20rpx;

					.timeTxtT {
						display: block;
						font-size: 42rpx;
						padding-top: 20rpx;
						font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
						color: #fff;
					}

					.timeTxtB {
						display: inline-block;
						color: #fff;
						font-size: 30rpx;
						letter-spacing: 5rpx;
						margin-top: 15rpx;
					}
				}

				.concernG {
					width: 20%;
					height: 60rpx;
					background-color: #fff;
					color: #007AFF;
					text-align: center;
					border-radius: 40rpx;
					float: left;
					font-size: 30rpx;
					line-height: 60rpx;
					margin-top: 30rpx;
					letter-spacing: 3rpx;

					.concernGImg {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.pendingMain {
			position: absolute;
			top: 400rpx;
			left: 0;
			padding: 0 20rpx;
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.time {
				margin-top: 40rpx;
				display: flex;

				.timeImg {
					width: 120rpx;
					height: 120rpx;

					.timeImg_img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.timeTxt {
					margin-left: 20rpx;

					.timeTxtT {
						display: block;
						font-weight: 900;
						font-size: 32rpx;
						padding-top: 20rpx;
						color: #333333;
					}

					.timeB {
						display: inline-block;
						color: #999999;
					}
				}
			}

			.address {
				margin-top: 30rpx;

				// height:200rpx;
				.addressBox {
					height: 50rpx;
					padding: 0 20rpx;
					line-height: 50rpx;
					color: #666666;
					font-size: 28rpx;

					.addressBoxL {
						letter-spacing: 3rpx;
					}

					.addressBoxR {
						margin-left: 10rpx;
						position: relative;

						.addressImg {
							width: 36rpx;
							height: 36rpx;
							line-height: 50rpx;
							margin-left: 30rpx;
							position: absolute;
							top: 0px;
							right: -60rpx;
						}
					}
				}
			}

			.main {
				// height: 120rpx;
				margin-top: 10px;

				.main_txt {
					display: block;
					padding: 38rpx 20rpx;
					// height: 120rpx;
					font-weight: 900;
				}
			}

			.pendingMain_img {
				display: flex;
				margin-top: 10px;

				.Main_img {
					flex: 1;
					height: 200rpx;
					padding: 0 20rpx;

					.Main_imgI {
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}

			.addition {
				height: 300rpx;
				background-color: #fff;
				margin-top: 30rpx;

				.additionBox {
					height: 100rpx;
					line-height: 100rpx;
					padding: 0 40rpx;
					border-bottom: 1px solid #EEEEEE;
					font-weight: 900;

					.item {
						color: #007AFF
					}
				}

				.additionBox_list {
					float: right;
					display: block;
					color: #ccc;
					font-weight: 300;
					font-size: 40rpx;
				}

				.additionBox_r {
					float: right;
					display: block;
					color: #333;
					font-weight: 300;

					.list {
						color: #ccc;
					}
				}

			}

			.complete {
				padding: 0 20rpx;
				display: flex;
				text-align: center;
				font-size: 26rpx;

				.complete_chu {
					// width: 180rpx;
					// height: 60rpx;
					// background-color: rgba(249,168,50,0.2);
					margin: 30rpx 10rpx;
					line-height: 60rpx;
					border-radius: 54rpx;
					position: relative;

					.complete_chuImg {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 16rpx;
						left: 30rpx;
					}

					.complete_chuTxt {
						margin-left: 7px;
					}
				}

				.complete_yi {
					width: 180rpx;
					height: 80rpx;
					background-color: rgba(70, 211, 69, 0.2);
					margin: 30rpx 10rpx;
					line-height: 80rpx;
					border-radius: 54rpx;
					position: relative;

					.complete_chuImg {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 16rpx;
						left: 30rpx;
					}

					.complete_chuTxt {
						margin-left: 7px;
					}
				}

				.complete_dian {
					margin-left: 160rpx;
					line-height: 140rpx;
					color: #999;
					letter-spacing: 3rpx;
				}
			}
		}

	}

	.list-img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.follow {
		height: 26px;
		line-height: 25px;
		text-align: center;
		padding: 0px 15px;
		border-radius: 16px;
		font-size: 11px;
		border: 1px solid #ffffff;
		float: right;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		color: #ffffff;
	}

	.clap_box {
		width: 89%;
		margin: 0 auto;
	}

	.clap_box_img {
		width: 100%;
		margin-top: 24px;
	}

	.guar-text textarea {
		border-radius: 8px;
		// width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}

	.clap_box_imgtow {
		position: absolute;
		top: 102px;
		right: 175px;
		width: 50px;
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		// color: #447A05;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #447A05;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #447A05;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		width: 30%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.button1 {
		width: 22%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.button:hover {
		border: 1px solid #F9A832;
		color: #FFFFFF;
		background-color: #F9A832;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
	}

	.list-img {
		width: 100rpx;
		height: 100rpx;
		// border-radius: 50%;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.title {
		font-size: 26rpx;
		color: #999999;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.button_btn {
		width: 29%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
		margin-left: 2px;
	}

	.complete {
		padding: 0 20rpx;
		display: flex;
		text-align: center;
		font-size: 26rpx;
		height: 74rpx;
		background: #eeeeee80;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 14rpx;

		.maintenance_status {
			font-weight: 600;
			margin-top: 1px;
		}
	}

	.complete_chu {
		// width: 180rpx;
		height: 60rpx;
		// background-color: rgba(249,168,50,0.2);
		// background-color: rgba(69, 124, 5, 0.1);
		// margin: 30rpx 10rpx;
		line-height: 60rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chu1 {
		// width: 180rpx;
		height: 60rpx;
		// background-color: rgba(249,168,50,0.2);
		background-color: rgba(69, 124, 5, 0.1);
		margin: 30rpx 10rpx;
		line-height: 60rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chuImg {
		width: 30rpx;
		height: 30rpx;
		margin-top: 8px // position: absolute;
			// top: 7px;
			// left: 30rpx;
	}

	.complete_chuTxt {
		margin-left: 7px;
	}

	.complete_yi {
		width: 180rpx;
		height: 80rpx;
		background-color: #33F9A832;
		margin: 30rpx 10rpx;
		line-height: 80rpx;
		border-radius: 54rpx;
		position: relative;
	}


	.search-box-l {
		width: calc(100% - 60rpx);
		height: 60rpx;
		border: 2rpx solid #447A05;
		border-radius: 36rpx;
		margin: auto;
		border-right: none;
		background: #fff;
		margin-left: 17px;

	}

	.search-btn {
		width: 153rpx;
		height: 70rpx;
		margin-top: -2rpx;

		.u-btn {
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			color: #ffffff !important;
			font-size: 32rpx;
		}
	}

	.search-row {
		border-bottom: 2rpx solid #eee;
		height: 82rpx;
	}

	.search-cont-box {
		border-bottom: 2rpx solid #eee;
	}

	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}

	.modal-cont {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.modal-icon {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
	}

	.modal-content {
		width: 443rpx;
		// height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-top: 24rpx;
	}

	.text-area {
		margin-top: 24rpx;
		width: 520rpx;
		padding: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		max-height: 105rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 8rpx;
	}

	.modal-bottom {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.btn-cancel {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.btn-cancel1 {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		/* border-right: 1rpx solid #d8d8d8; */
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.btn-sure {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.left-right {
		display: flex;
		align-items: flex-end;
	}

	.left-right-left {
		display: flex;
		margin-top: 10rpx;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.avatar-icon {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-right-icon {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 24px;
		right: -6px;
	}

	.avatar-title {
		margin-left: 8px;
		margin-top: 5px;
	}

	.avatar-name {
		font-weight: bold;
	}

	.avatar-house-name {
		font-size: 12px;
		margin-left: 8rpx;
		color: #399300;
	}

	.operation_box {
		.matter {
			border: 1px solid #EBF9FF;
			background: #EBF9FF;
			color: #11A9EC;
			border-radius: 5px;
			padding: 3px 10px 5px;
		}

		.matter1 {
			border: 1px solid #FFF5E7;
			background: #FFF5E7;
			color: #F9A832;
			border-radius: 5px;
			padding: 3px 10px 5px;
		}

		.matter2 {
			border: 1px solid #EDFFED;
			background: #EDFFED;
			color: #63B604;
			border-radius: 5px;
			padding: 3px 10px 5px;
		}

		.public-three {
			width: 140rpx;
		}

		.imagesMinx {
			width: 13px;
			height: 13px;
			margin-right: 4px;
			top: -1px;
			vertical-align: bottom;
		}
	}

	.hand-photo-postion {
		width: 10px;
		height: 13px;
		margin-right: 10px;
		top: 2px;
	}

	.image_handle {
		width: 18px;
		height: 18px;
		padding-right: 10rpx;
	}

	.like_reply {
		margin-left: 8px;
		font-size: 16px;
		margin-top: 2px;
	}

	.modal2 {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}

	.modal-cont2 {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.modal-icon2 {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}

	.modal-title2 {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
		align-items: center;
		border-bottom: 1px solid #ddd;
		padding: 0px 20px 10px;
		text-align: center;
		width: 89%;
		margin: auto;
	}

	.modal-content2 {
		width: 443rpx;
		// height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-top: 24rpx;
	}

	.text-area2 {
		margin-top: 24rpx;
		width: 520rpx;
		padding: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		max-height: 105rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 8rpx;
	}

	.modal-bottom2 {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.btn-cancel2 {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}


	.btn-sure2 {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}

	.complaint_box {
		position: relative;
	}

	.complaint {
		position: absolute;
		border: 1px solid black;
		// display: none;
	}

	.complaint_item {
		display: block;
		width: 100rpx;
		height: 50rpx;
		font-size: 12px;
		line-height: 50rpx;
		text-align: center;
	}

	.complaint_item:hover {
		background-color: #ccc;
	}
</style>